<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j component-weixin-pay-code">
    <div class="code-box">
      <div
        v-show="!isShowCodeMask"
        class="qrcode"
      >
        <canvas id="wxPayQrCode" />
      </div>
      <div
        v-show="isShowCodeMask"
        class="code-mask"
      >
        {{ $t('payment.qrCodeHasExpired') }}
      </div>
      <div class="text">
        {{ $t('payment.weChatSweepPayment') }}
      </div>
    </div>
    <div class="wx-bg">
      <img
        src="@/assets/images/wxPayBg.png"
        alt
      >
    </div>
  </div>
</template>

<script setup>
import QRCode from 'qrcode'
const props = defineProps({
  isShowCodeMask: {
    type: Boolean,
    default: false
  },
  weixinCodeUrl: {
    type: String,
    default: null
  }

})

onMounted(() => {
  wxPayCode()
})

// 生成微信支付二维码
const wxPayCode = () => {
  QRCode.toCanvas(document.getElementById('wxPayQrCode'), props.weixinCodeUrl, { version: 6, errorCorrectionLevel: 'L' })
}

</script>

<style lang="scss" scoped>
@use "index";
</style>
